/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div class="onePageTable">
  <div class="commonTablePanel openatc-operationrecord">
    <el-dialog width="35%" :visible.sync="viewVisible" append-to-body>
      <div class="json-view-modal">
        <json-view :deep="8" :theme="jsonViewTheme" :data="exportData" />
      </div>
    </el-dialog>
    <div style="display:inline-block;width:100%;">
      <div class="common-table-title-container">
        <div class="common-table-title">{{$t('openatc.gis.platformrecording')}}</div>
      </div>
      <div class="filter-container" style="float:right;margin-right:20px;">
        <div class="filters">
          <span class="header-span">{{$t('openatc.record.status') }}：</span>
            <el-select
                style="width: 100px;"
                v-model="responsestate"
                @change="onConditionChange"
                clearable
                >
                <el-option
                    v-for="(item, index) in responsestates"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
            </el-select>
        </div>
        <div class="filters">
          <span class="header-span">{{ $t("openatc.record.operationtype") }}：</span>
          <el-select
                style="width: 100px;"
                v-model="operationtype"
                @change="onConditionChange"
                clearable
                >
                <el-option
                    v-for="(item, index) in operationtypes"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
            </el-select>
        </div>
        <div class="filters">
          <span class="header-span">{{ $t("openatc.record.module") }}：</span>
          <el-select
                style="width: 100px;"
                v-model="operatmodule"
                @change="onConditionChange"
                clearable
                >
                <el-option
                    v-for="(item, index) in operatmodules"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
            </el-select>
        </div>
        <div class="filters">
          <span class="header-span">{{$t('openatc.record.username') }}：</span>
          <el-input
              clearable
              v-model="operator"
              style="width:120px;"
              @change="onConditionChange"
          />
        </div>
        <div class="filters timepicker">
          <span class="header-span">{{$t('openatc.record.opertime') }}：</span>
          <template >
            <el-date-picker
              v-model="timeValue"
              popper-class="common-date-popper"
              type="datetimerange"
              range-separator="-"
              :start-placeholder="$t('openatc.usermanager.starttime')"
              :end-placeholder="$t('openatc.usermanager.endtime')"
              @change="onConditionChange">
            </el-date-picker>
          </template>
        </div>
      </div>
    </div>
    <div class="atc-table" id="footerBtn">
      <el-table
        :data="tableData"
        size="mini"
        :max-height="tableHeight"
        style="width: 100%;font-size: 14px;"
        v-loading.body="listLoading">
        <el-table-column
          type="index"
          align="center">
        </el-table-column>
        <el-table-column
          prop="opertime"
          :label="$t('openatc.record.opertime')"
          sortable
          align="center">
        </el-table-column>
        <el-table-column
          prop="operator"
          :label="$t('openatc.record.username')"
          align="center">
        </el-table-column>
        <el-table-column
          prop="source"
          :label="$t('openatc.record.IP')"
          align="center">
        </el-table-column>
        <el-table-column
          prop="model"
          :formatter="formatterModel"
          :label="$t('openatc.record.modulename')"
          align="center">
        </el-table-column>
        <el-table-column
          prop="infotype"
          :label="$t('openatc.record.operationtype')"
          :formatter="formatterSubInfoType"
          align="center">
        </el-table-column>
        <el-table-column
          prop="status"
          :label="$t('openatc.record.status')"
          align="center"
          :formatter="formatterStatus">
        </el-table-column>
        <el-table-column :label="$t('openatc.record.opera')" align="center">
        <template slot-scope="scope">
            <el-button type="text" @click="derive(scope.$index)">{{$t('openatc.record.view')}}</el-button>
        </template>
        </el-table-column>
      </el-table>
     <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageNum" :page-size="listQuery.pageRow" :total="totalCount" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" style='margin:0px;'>
     </el-pagination>
  </div>
  </div>
</div>
</template>

<script>
import { platformHisParams, getHisParamsPlatform } from '../../api/table'
import { getDict } from '../../api/device'
import { getMessageByCode } from '../../utils/responseMessage'
import moment from 'moment'
import jsonView from 'vue-json-views'
import { getTheme } from '../../utils/auth.js'
export default {
  name: 'user',
  data () {
    return {
      responsestate: '',
      operationtype: '',
      operatmodule: '',
      operatmodules: [],
      operationtypes: [],
      responsestates: [
        {
          label: this.$t('openatc.record.success'),
          value: '0'
        },
        {
          label: this.$t('openatc.record.fault'),
          value: '1'
        }
      ],
      source: '',
      infotype: '',
      status: '',
      operator: '',
      timeValue: [new Date().getTime() - 3600 * 1000 * 24, new Date()],
      tableHeight: 700,
      screenHeight: window.innerHeight, // 屏幕高度
      schfilter: '',
      listLoading: false,
      tableData: [],
      listQuery: {
        pageNum: 1, // 页码
        pageRow: 50 // 每页条数
      },
      totalCount: 0, // 分页组件--数据总条数
      viewVisible: false,
      jsonViewTheme: getTheme() === 'light' ? '' : 'vs-code'
    }
  },
  components: { jsonView },
  watch: {
    screenHeight: function () {
      // 监听屏幕高度变化
      this.tableHeight =
                window.innerHeight -
                document.querySelector('#footerBtn').offsetTop -
                60
    }
  },
  mounted: function () {
    this.getList()
    this.getDicts()
    var _this = this
    _this.$nextTick(function () {
      // window.innerHeight:浏览器的可用高度
      // this.$refs.table.$el.offsetTop：表格距离浏览器的高度
      // 后面的50：根据需求空出的高度，自行调整
      _this.tableHeight =
                window.innerHeight -
                document.querySelector('#footerBtn').offsetTop -
                60
      window.onresize = function () {
        // 定义窗口大小变更通知事件
        _this.screenHeight = window.innerHeight // 窗口高度
      }
    })
  },
  methods: {
    getDicts () {
      getDict().then(res => {
        this.operatmodules = res.data.data.filter(it => it.type === 'operation_model').map(item => {
          return {
            value: item.key,
            label: this.getLabel(item.key)
          }
        })
        this.operationtypes = res.data.data.filter(it => it.type === 'operation_infotype').map(item => {
          return {
            value: item.key,
            label: this.getLabels(item.key)
          }
        })
      })
    },
    getLabels (value) {
      if (value === 'create') {
        return this.$t('openatc.record.create')
      } else if (value === 'delete') {
        return this.$t('openatc.record.delete')
      } else if (value === 'update') {
        return this.$t('openatc.record.update')
      } else if (value === 'download') {
        return this.$t('openatc.record.download')
      } else if (value === 'login') {
        return this.$t('openatc.record.login')
      } else if (value === 'logout') {
        return this.$t('openatc.record.logout')
      } else {
        return ''
      }
    },
    getLabel (value) {
      if (value === 'login') {
        return this.$t('openatc.record.logins')
      } else if (value === 'intersection') {
        return this.$t('openatc.record.intersection')
      } else if (value === 'section') {
        return this.$t('openatc.record.section')
      } else if (value === 'role') {
        return this.$t('openatc.record.role')
      } else if (value === 'user') {
        return this.$t('openatc.record.users')
      } else if (value === 'route-download') {
        return this.$t('openatc.record.routedownload')
      } else if (value === 'area-download') {
        return this.$t('openatc.record.areadownload')
      } else if (value === 'route') {
        return this.$t('openatc.record.route')
      } else {
        return ''
      }
    },
    onConditionChange (val) {
      this.listQuery = {
        pageNum: 1, // 页码
        pageRow: 50 // 每页条数
      }
      this.getList()
    },
    onSearchClick () {
      this.getList()
    },
    getReqData () {
      let reqData = {}
      let from = moment(this.timeValue[0]).format('YYYY-MM-DD HH:mm:ss')
      let to = moment(this.timeValue[1]).format('YYYY-MM-DD HH:mm:ss')
      reqData = {
        beginTime: from,
        endTime: to,
        pageNum: this.listQuery.pageNum,
        pageRow: this.listQuery.pageRow
      }
      if (this.operatmodule !== '') {
        reqData.model = this.operatmodule
      }
      if (this.operationtype !== '') {
        reqData.infotype = this.operationtype
      }
      if (this.responsestate !== '') {
        reqData.status = this.responsestate
      }
      if (this.operator !== '') {
        reqData.operator = this.operator
      }
      return reqData
    },
    getList () {
      let reqData = this.getReqData()
      this.listLoading = true
      getHisParamsPlatform(reqData).then(data => {
        if (data.data.success !== true) {
          this.listLoading = false
          if (data.data.code === '20004') {
            this.$message.error('无参数记录!')
            return
          }
          this.$message.error(getMessageByCode(data.data.code, this.$i18n.locale))
          return
        }
        this.listLoading = false
        this.tableData = data.data.data.content
        this.totalCount = data.data.data.total
      })
    },
    formatterStatus (row, column) {
      if (row.status === 0) {
        return this.$t('openatc.record.success')
      } else if (row.status === 1) {
        return this.$t('openatc.record.fault')
      }
    },
    formatterModel (row, column) {
      if (row.model === 'login') {
        return this.$t('openatc.record.logins')
      } else if (row.model === 'intersection') {
        return this.$t('openatc.record.intersection')
      } else if (row.model === 'section') {
        return this.$t('openatc.record.section')
      } else if (row.model === 'role') {
        return this.$t('openatc.record.role')
      } else if (row.model === 'user') {
        return this.$t('openatc.record.users')
      } else if (row.model === 'route-download') {
        return this.$t('openatc.record.routedownload')
      } else if (row.model === 'area-download') {
        return this.$t('openatc.record.areadownload')
      } else if (row.model === 'route') {
        return this.$t('openatc.record.route')
      } else {
        return ''
      }
    },
    formatterSubInfoType (row, column) {
      let res = row.infotype
      if (res === 'create') {
        return this.$t('openatc.record.create')
      } else if (res === 'delete') {
        return this.$t('openatc.record.delete')
      } else if (res === 'update') {
        return this.$t('openatc.record.update')
      } else if (res === 'download') {
        return this.$t('openatc.record.download')
      } else if (res === 'login') {
        return this.$t('openatc.record.login')
      } else if (res === 'logout') {
        return this.$t('openatc.record.logout')
      } else {
        return ''
      }
    },
    derive (index) {
      let id = this.tableData[index].id
      platformHisParams(id).then(data => {
        if (data.data.success !== true) {
          this.$message.error(getMessageByCode(data.data.code, this.$i18n.locale))
          return
        }
        this.exportData = data.data.data
        // this.$alert(`<pre>${JSON.stringify(exportData, null, 4)}</pre>`, '', {
        //   customClass: 'recordJsonModal',
        //   showConfirmButton: false,
        //   dangerouslyUseHTMLString: true
        // })
        this.viewVisible = true
      })
    },
    handleSizeChange (val) {
      // 改变每页数量
      this.listQuery.pageRow = val
      this.getList()
    },
    handleCurrentChange (val) {
      // 改变页码
      this.listQuery.pageNum = val
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
